<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#id1{
			width: 100px;
			height: 100px;
			background-color: green;
		}
		#id2{
			width: 60px;
			height: 60px;
			background-color: brown;
		}
		#id3{
			width: 40px;
			height: 40px;
			background-color: cyan;
		}
			#id01{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			#id02{
				width: 300px;
				height: 300px;
				background-color: yellow;
			}
			#id03{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			#idd{
				width:60px;
				height: 60px;
				background-color: blue;
			}
		</style>
	</head>
	<!-- 1.按钮和DIV的单击事件（三种绑定方式）
	2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮
	
	任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	<body>
		<!-- 1.1 按钮的单击事件 -->
		<button type="button" id="btn1" onclick="btnclick();">按钮1</button>
		<button type="button" id="btn2" >按钮2</button>
		<button type="button" id="btn3" >按钮3</button>
		<br/><br/>
		<!-- 1.2 DIV的单击事件 -->
		<div id="id1" onclick="divclick();"></div>
		<div id="id2" ></div>
		<div id="id3" ></div>
		<br/><br/>
		<!-- 2.DIV绑定方式 -->
		<div id="id01" onclick="divclick0();" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="movediv();"></div>
		<div id="id02" ></div>
		<div id="id03" ></div>
		<br/><br/>
		<!-- 3.登入页面 -->
		用户名<input type="text" name="" id="username" value="" onfocus="selectinput();" onblur="leaveinput();"/><br/>
		密码  <input type="password" name="" id="password" value="" onfocus="selectinput1();" onblur="leaveinput1();"/><br/>
		<button type="button" onclick="btnclickaa();">提交</button>
		<br/><br/>
		<!-- 4.DIV移动事件 -->
		<div id="idd" onclick="listener" ></div>
		<br/><br/>
		<button type="button" onclick="addlistener()">添加监听器</button>
		<button type="button" onclick="removelistener()">清除监听器</button>
	</body>
	<script type="text/javascript">
	    // 1.1.1
		function btnclick(){
			console.log('点击成功！');
		}
		// 1.1.2
		document.getElementById('btn2').onclick = btnclick;
		// 1.1.3
		document.getElementById('btn3').addEventListener('click',function(){
			console.log('点击成功！');
		});
		//1.2.1
		function divclick(){
			console.log('点击成功');
		}
		//1.2.2
		document.getElementById('id2').onclick = divclick;
		//1.2.3
		document.getElementById('id3').addEventListener('click',function(){
			console.log('点击成功！');
		});
		// 2.1.1
		function divclick0(){
			console.log('hhh');
		}
		function enterdiv(){
			console.log('鼠标进入DIV元素')
			document.getElementById('id01').style.backgroundColor = 'blue'
		}
		function leavediv(){
			console.log('鼠标离开DIV元素')
			document.getElementById('id01').style.backgroundColor = 'red'
		}
		function movediv(){
			console.log('鼠标DIV元素上移动')
		}
		// 2.1.2
		document.getElementById('id02').onclick = function(){
			console.log('hhh');
		}
		document.getElementById('id02').onmouseenter = function(){
			console.log('鼠标进入DIV元素')
			document.getElementById('id02').style.backgroundColor = 'green'
		}
		document.getElementById('id02').onmouseleave = function(){
			console.log('鼠标离开DIV元素')
			document.getElementById('id02').style.backgroundColor = 'yellow'
		}
		document.getElementById('id02').onmousemove = function(){
			console.log('鼠标DIV元素上移动')
		}
		// 2.1.3
		document.getElementById('id03').addEventListener('click',function(){
			console.log('hhh');
		});
		document.getElementById('id03').addEventListener('mouseenter',function(){
			console.log('鼠标进入DIV元素');
			document.getElementById('id03').style.backgroundColor = 'red'
		});
		document.getElementById('id03').addEventListener('mouseleave',function(){
			console.log('鼠标离开DIV元素');
			document.getElementById('id03').style.backgroundColor = 'blue'
		});
		document.getElementById('id03').addEventListener('mousemove',function(){
			console.log('鼠标DIV元素上移动');
		});
		// 3.1
		function selectinput(){
			console.log('用户在输入名称');
		}
		//3.2
		function leaveinput(){
			console.log('输入完成');
			if(document.getElementById('username').value == ''){
				alert('没有输入用户名！');
			}
		}
		//3.3
		function selectinput1(){
			console.log('用户在输入密码');
		}
		//3.4
		function leaveinput1(){
			console.log('输入完成');
			if(document.getElementById('password').value == ''){
				alert('没有输入密码！');
			}
		}
		//3.5
		function btnclickaa(){
			if(document.getElementById('username').value == '' && document.getElementById('password').value == ''){
				alert('用户名和密码为空');
			}else if(document.getElementById('username').value == ''){
				alert('用户名为空');
			}else if(document.getElementById('password').value == ''){
				alert('密码为空');
			}else{
				alert('登陆成功！');
			}
		}
		//4
		function listener(){
			console.log('被点击了')
		}
		function addlistener(){
			document.getElementById('idd').addEventListener('mousemove',listener)
		}
		function removelistener(){
			document.getElementById('idd').removeEventListener('mousemove',listener);
		}
	</script>
</html>
